<div class="element-property">
    <div class="element-property-title">
        {{'pipe.property-title' | translate}}
    </div>
    <div class="pipe-selection">
        <mat-tab-group style="height: 100%;">
            <mat-tab label="{{'editor.settings-general' | translate}}">
                <div class="element-property-header">
                    <span>{{'pipe.property-data' | translate}}</span>
                </div>
                <div class="block mt5">
                    <flex-auth [name]="name"
                               [permission]="property.permission"
                               (onChanged)="onFlexAuthChanged($event)"
                               [permissionMode]="'onlyShow'"
                               #flexauth>
                    </flex-auth>
                </div>
                <div class="element-property-header">
                    <span>{{'pipe.property-style' | translate}}</span>
                </div>
                <div class="block mt5">
                    <div class="my-form-field inbk">
                        <span>{{'pipe.property-border-width' | translate}}</span>
                        <input numberOnly
                               [(ngModel)]="options.borderWidth"
                               (change)="onChangeValue('borderWidth', options.borderWidth)"
                               max="100"
                               min="0"
                               step="1"
                               type="number"
                               class="style-size">
                    </div>
                    <div class="my-form-field ml10">
                        <span>{{'pipe.property-border-color' | translate}}</span>
                        <input [(colorPicker)]="options.border" [style.background]="options.border" [cpAlphaChannel]="'always'" class="input-color"
                            [cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true" [cpCancelButtonClass]="'cpCancelButtonClass'"
                            [cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" style="width: 80px"
                            [cpPosition]="'bottom'" (colorPickerChange)="onChangeValue('border', $event)" />
                    </div>
                </div>
                <div class="block mt5">
                    <div class="my-form-field inbk">
                        <span>{{'pipe.property-pipe-width' | translate}}</span>
                        <input numberOnly
                               [(ngModel)]="options.pipeWidth"
                               (change)="onChangeValue('pipeWidth', options.pipeWidth)"
                               max="100"
                               min="0"
                               step="1"
                               type="number"
                               class="style-size">
                    </div>
                    <div class="my-form-field ml10">
                        <span>{{'pipe.property-pipe-color' | translate}}</span>
                        <input [(colorPicker)]="options.pipe" [style.background]="options.pipe" [cpAlphaChannel]="'always'" class="input-color"
                            [cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true" [cpCancelButtonClass]="'cpCancelButtonClass'"
                            [cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" style="width: 80px"
                            [cpPosition]="'bottom'" (colorPickerChange)="onChangeValue('pipe', $event)" />
                    </div>
                </div>
                <div class="block mt5">
                    <div class="my-form-field inbk">
                        <span>{{'pipe.property-content-width' | translate}}</span>
                        <input numberOnly
                               [(ngModel)]="options.contentWidth"
                               (change)="onChangeValue('contentWidth', options.contentWidth)"
                               max="100"
                               min="0"
                               step="1"
                               type="number"
                               class="style-size">
                    </div>
                    <div class="my-form-field ml10">
                        <span>{{'pipe.property-content-color' | translate}}</span>
                        <input [(colorPicker)]="options.content" [style.background]="options.content" [cpAlphaChannel]="'always'" class="input-color"
                            [cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true" [cpCancelButtonClass]="'cpCancelButtonClass'"
                            [cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" style="width: 80px"
                            [cpPosition]="'bottom'" (colorPickerChange)="onChangeValue('content', $event)" />
                    </div>
                    <div class="my-form-field ml10">
                        <span>{{'pipe.property-content-space' | translate}}</span>
                        <input numberOnly
                               [(ngModel)]="options.contentSpace"
                               (change)="onChangeValue('contentSpace', options.contentSpace)"
                               min="0"
                               step="1"
                               type="number"
                               class="style-size">
                    </div>
                </div>
                <div class="element-property-header">
                    <span>{{'pipe.property-style-animation' | translate}}</span>
                </div>
                <ng-container *ngIf="options.imageAnimation; else imageAnimVoid">
                    <div class="my-form-field block mt5 image-animation">
                        <img src="{{options.imageAnimation.imageUrl}}" style="max-width: 80%;">
                        <button mat-icon-button (click)="onClearImage()" matTooltip="{{'pipe.property-style-animation-image-remove' | translate}}">
                            <mat-icon>clear</mat-icon>
                        </button>
                    </div>
                    <div class="my-form-field inbk">
                        <span>{{'pipe.property-style-animation-count' | translate}}</span>
                        <input numberOnly
                               [(ngModel)]="options.imageAnimation.count"
                               (change)="onChangeValue('imageAnimation', options.imageAnimation)"
                               min="1"
                               step="1"
                               type="number"
                               class="style-size">
                    </div>
                    <div class="my-form-field inbk ml10">
                        <span>{{'pipe.property-style-animation-delay' | translate}}</span>
                        <input numberOnly
                               [(ngModel)]="options.imageAnimation.delay"
                               (change)="onChangeValue('imageAnimation', options.imageAnimation)"
                               min="0"
                               step="100"
                               type="number"
                               class="style-size">
                    </div>
                </ng-container>
                <ng-template #imageAnimVoid>
                    <div class="my-form-field block mt5 image-animation">
                        <!-- <span>{{'pipe.property-style-animation' | translate}}</span> -->
                        <mat-select placeholder="{{'pipe.property-style-animation-image' | translate}}" (click)="imagefile.click();" >
                        </mat-select>
                        <input #imagefile type="file" style="display: none;" (change)="onSetImage($event)" accept=".svg,image/svg+xml" />
                    </div>
                </ng-template>
            </mat-tab>
            <!-- <mat-tab label="{{'editor.settings-events' | translate}}">
                <div class="events-toolbox">
                    <button mat-icon-button (click)="onAddEvent()">
                        <mat-icon>add_circle_outline</mat-icon>
                    </button>
                </div>
            </mat-tab> -->
            <mat-tab label="{{'editor.settings-actions' | translate}}">
                <div class="toolbox">
                    <button mat-icon-button (click)="onEditActions()" matTooltip="{{'table.property-edit-actions-tooltip' | translate}}">
                        <mat-icon>edit</mat-icon>
                    </button>
                </div>
                <div class="mt30">
                    <div *ngFor="let action of property?.actions; index as i" class="action-readonly-item">
                        <div class="my-form-field tag">
                            <span>{{'action-settings-readonly-tag' | translate}}</span>
                            <input [value]="getActionTag(action)" type="text" readonly [disabled]="true">
                        </div>
                        <div class="flex value mt5">
                            <div class="my-form-field number inbk">
                                <span>{{'gui.range-number-min' | translate}}</span>
                                <input [value]="action?.range?.min" type="text" readonly [disabled]="true">
                            </div>
                            <div class="my-form-field number inbk ml5">
                                <span>{{'gui.range-number-max' | translate}}</span>
                                <input [value]="action?.range?.max" type="text" readonly [disabled]="true">
                            </div>
                            <div class="my-form-field type inbk ml5">
                                <span>{{'gauges.property-action-type' | translate}}</span>
                                <input [value]="getActionType(action)" type="text" readonly [disabled]="true">
                            </div>
                        </div>
                    </div>
                </div>
            </mat-tab>
        </mat-tab-group>
    </div>
</div>